<template>
    <div class="weibo-editor">
        <div class="editor-header">
            <h3>编辑微博</h3>
            <div class="word-count">{{ wordCount }}字</div>
        </div>
        <!-- 简化版：使用textarea替代富文本编辑器 -->
        <textarea 
            style="width: 100%; height: 500px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;"
            v-model="valueText"
            @input="handleInput"
            placeholder="请输入内容..."
        ></textarea>

        <!-- 发布按钮 -->
        <div class="editor-footer">
            <button class="publish-btn" @click="handlePublish">发布</button>
        </div>
    </div>
</template>

<script>
// 暂时注释掉wangeditor引用以解决启动问题
// import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'

export default {
    // 移除Editor和Toolbar组件引用
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        const valueText = ref('')
        const wordCount = ref(0)

        // 简单的字数统计和内容更新
        const handleInput = () => {
            wordCount.value = valueText.value.length
            emit('content-update', valueText.value)
        }

        // 监听父组件内容变化
        watch(() => props.content, (newVal) => {
            valueText.value = newVal || ''
            wordCount.value = valueText.value.length
        }, { immediate: true })

        // 移除复杂的编辑器配置和销毁逻辑
        
        // 发布处理
        const handlePublish = () => {
            // 微博文案优化处理
            let contentText = valueText.value.trim()
            
            // 1. 字数限制（微博通常限制2000字）
            if (contentText.length > 2000) {
                ElMessage.warning('内容超过2000字，已自动截断')
                contentText = contentText.substring(0, 1997) + '...'
            }
            
            // 2. 文本清理
            const cleanedContent = contentText
                .replace(/\n+/g, ' ')      // 将换行符替换为空格
                .replace(/\s+/g, ' ')      // 多个空格合并为一个
                .replace(/^\s+|\s+$/g, '') // 去除首尾空格
            
            // 3. 提取话题标签
            const regex = /#([^#\s]+)#/g
            const hashtags = []
            let match
            while ((match = regex.exec(contentText)) !== null) {
                hashtags.push(`#${match[1]}#`)
            }
            
            // 4. 优化话题标签（确保不重复并添加热门话题提示）
            const uniqueHashtags = [...new Set(hashtags)]
            
            // 5. 构建标准发布数据结构
            const publishData = {
                platform: 'weibo',
                content: cleanedContent,
                hashtags: uniqueHashtags,
                postType: 'text'
            }
            
            console.log('📤 微博发布数据:', publishData)
            
            emit('publish', publishData)
            ElMessage.success('微博发布成功')
        }

        return {
            valueText,
            wordCount,
            handleInput,
            handlePublish
        }
    }
}
</script>

<style scoped>
/* 样式保持不变 */
.weibo-editor {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: "Microsoft YaHei", sans-serif;
}

.editor-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #141414;
}

.word-count {
    font-size: 18px;
    color: #8c8c8c;
}

.editor-footer {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
}

.publish-btn {
    background-color: #ff8c00;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.publish-btn:hover {
    background-color: #e07b00;
}

.weibo-hashtag {
    color: #1da1f2;
    font-weight: bold;
}

.weibo-highlight {
    color: #ff4500;
}
</style>